<template>
  <div>
    <Layout ref="layout" :tabs="tabs" :tabDefault.sync="tabDefault" :total="total" :listQuery="listQuery" @search="getTableData">
      <template #btn>
        <el-button type="primary" round @click="handlerAdd" v-if="tabDefault != 2">办理转正</el-button>
      </template>
      <template #table="{ height }">
        <SettingTable v-loading="loading" :selection="selection" :height="height" :list="list" :tableData="tableData" @setSelectId="handleSelectionChange">
          <template #oper="{ row }">
            <span class="oper" @click="oper(row, 1)" v-if="row.State == 0">办理转正</span>
            <span class="oper" @click="oper(row, 2)" v-if="row.State == 1">取消转正</span>
          </template>
        </SettingTable>
      </template>
    </Layout>
    <OperationDialog @confirm="onConfirm" title="办理转正" :isDialog.sync="isDialog" :rules="rules" :formList="formList"></OperationDialog>
  </div>
</template>

<script>
import { BLZZ, BLZZ_Rules } from "./config.js";
import Layout from "../layout/index.vue";
import SettingTable from "../layout/SettingTable.vue";
import OperationDialog from "./OperationDialog.vue";

export default {
  name: "positive",
  components: { Layout, SettingTable, OperationDialog },
  data() {
    return {
      tabDefault: "1",
      tableData: [],
      list: [],
      tabs: [
        { label: "待转正", name: "1" },
        { label: "已转正", name: "2" },
      ],

      total: 0,
      listQuery: {
        PageSize: 50,
        PageIndex: 1,
      },

      loading: false,
      isDialog: false,
      formList: BLZZ,
      rules: BLZZ_Rules,
      isSelectUser: false,
      ids: [],
    };
  },
  computed: {
    selection() {
      return this.tabDefault == "1";
    },
  },
  watch: {
    tabDefault: {
      immediate: true,
      handler() {
        this.tableData = [];
        this.total = 0;
        this.listQuery = { PageSize: 50, PageIndex: 1 };
      },
    },
  },
  methods: {
    handleSelectionChange(e) {
      this.ids = e;
    },
    setUserId(id) {
      console.log(id, "userId");
      if (this.tableData.find((m) => m.Employeeid == id).State == 0) {
        this.$router.push({ name: "positiveAdd", query: { userId: id } });
      } else {
        this.$message.warning("当前人员已办理转正，不允许重复操作！");
        return;
      }
    },
    handlerAdd() {
      // this.$router.push({ name: "positiveAdd" });
      this.isSelectUser = true;
      if (this.ids.length > 1) {
        this.$message.warning("只能选择一个员工");
        return;
      } else if (this.ids.length < 1) {
        this.$message.warning("请选择至少一个员工");
        return;
      } else {
        if (this.tableData.find((m) => m.Employeeid == this.ids[0].Employeeid).State == 0) {
          this.$router.push({ name: "positiveAdd", query: { userId: this.ids[0].Employeeid } });
        } else {
          this.$message.warning("当前人员已办理转正，不允许重复操作！");
          return;
        }
      }
    },
    async onConfirm(form) {
      await this.$api.optionsManage.InsertEmployeeRegular(form);
      this.$refs.layout.onSearch();
      this.isDialog = false;
    },

    async getTableData(e) {
      this.loading = true;
      const params = { pageIndex: this.listQuery.PageIndex, pageSize: this.listQuery.PageSize, departments: [], employeeStatus: "", nameOrJobOrPhone: "" };
      const { data } = await this.$api.optionsManage.GetBecomePage(e || params, this.tabDefault || "1");
      this.tableData = data.data.data;
      this.total = data.data.total;
      this.list = data.data.columns.sort((a, b) => a.index - b.index).map((i) => ({ prop: i.columnCode, label: i.columnname, [i.isFixed ? "fixed" : ""]: "left" }));
      this.tabDefault == 1 && this.list.push({ prop: "", label: "操作", fixed: "right", minWidth: 70 });
      this.loading = false;
    },
    async oper({ Employeeid: employeeId, BecomRegularId: becomRegularId }, type) {
      if (type == 1) {
        this.$router.push({ name: "positiveAdd", query: { userId: employeeId } });
      } else {
        await this.$confirm("确定取消该员工的转正申请吗？取消转正后，将自动撤销审批流程，且员工状态和转正日期恢复原样。", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" });
        await this.$api.optionsManage.UnConfirmEmployeeRegular({ becomRegularId });
      }
      // if (type === 1) {
      //   await this.$confirm("此操作将该员工转正, 是否继续?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" });
      //   await this.$api.optionsManage.ConfirmEmployeeRegular({ employeeId });
      // }
      // this.isDialog = type === 2;
      // this.$refs.layout.onSearch();
    },
  },
  activated() {
    this.getTableData();
  },
  created() {
    this.getTableData();
  },
};
</script>

<style lang="less" scoped></style>
